<!--左侧导航-->
<aside class="lyear-layout-sidebar">

    <!-- logo -->
    <div id="logo" class="sidebar-header">
        <a href="/admin/home.html">
            后台管理系统
        </a>
    </div>
    <div class="lyear-layout-sidebar-info lyear-scroll" style="overflow-y: auto">
        <nav class="sidebar-main">
        </nav>

        <div class="sidebar-footer">
            <p class="copyright">Copyright &copy; 2022. <a target="_blank" href="#">梦祥网络</a> All rights reserved.
            </p>
        </div>
    </div>
</aside>
<!--End 左侧导航-->

<!--删除弹窗-->
<div class="modal fade bs-example-modal-lg removeDio" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
     data-backdrop="static">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="myModalLabel">确认删除</h6>
                <div class="float-right">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </div>
            <div class="modal-body">
                是否确定删除数据?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="deletes">删除</button>
            </div>
        </div>
    </div>
</div>

<!--图片预览-->
<div class="modal fade text-center picbig">
    <div class="modal-dialog modal-lg" style="display: inline-block; width: auto;">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                    aria-hidden="true">×</span></button>
        </div>
        <div class="modal-content">
            <img id="showImage" src="">
        </div>
    </div>
</div>

<!--启用-->
<div class="modal fade bs-example-modal-lg enabledDio" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
     data-backdrop="static">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title">批量启用</h6>
                <div class="float-right">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </div>
            <div class="modal-body">
                是否批量启用数据?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="enabledBtn">确认</button>
            </div>
        </div>
    </div>
</div>

<!--禁用-->
<div class="modal fade bs-example-modal-lg disabledDio" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
     data-backdrop="static">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title">批量禁用</h6>
                <div class="float-right">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </div>
            <div class="modal-body">
                是否批量禁用数据?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="disabledBtn">确认</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="/statics/js/custom/logMenu.js"></script>
<script type="text/javascript">

    /**
     * 菜单
     * @param data 菜单JSON数据
     *        id 菜单唯一ID
     *        name 菜单名称
     *        url 菜单链接地址
     *        icon 图标
     *        pid  父级ID
     *        isOut 是否外链0否|1是,外链a标签没有class='multitabs'
     *        isHome 是否首页
     */
    var setSidebar = function (data) {
        if (data == null || data.length === 0) {
            return false;
        }
        var arrData = (typeof data == 'object') ? data : JSON.parse(data);
        var treeObj = getTrees(arrData, 0, 'id', 'pid', 'children');
        var html = createMenu(treeObj, true, 0);
        $('.sidebar-main').append(html);

        var href = window.location.pathname;
        $('.sidebar-main a').each(function () {
            var aHref = $(this).attr("path");
            var mode = 0;
            if (aHref === "") {
                aHref = $(this).attr("href");
                mode = 1;
            }
            if (aHref.indexOf("?") >= 0) {
                aHref = aHref.substr(0, aHref.lastIndexOf("?"));
            }
            if (mode === 1) {
                if (aHref === href) {
                    $(this).parents(".cc").addClass("active");
                    $(this).parents(".aa").addClass("open");
                    $(this).parents(".bb").css("display", "block");
                }
            } else {
                if (href.indexOf(aHref) >= 0) {
                    $(this).parents(".cc").addClass("active");
                    $(this).parents(".aa").addClass("open");
                    $(this).parents(".bb").css("display", "block");
                }
            }

        });
    }
    //创建菜单
    var createMenu = function (data, is_frist, depth) {
        var menu_body = is_frist ? '<ul class="nav nav-drawer">' : '<ul class="nav nav-subnav bb">';
        for (var i = 0; i < data.length; i++) {
            var icon_div = data[i].pid === "0" ? '<i class="mdi ' + data[i].icon + '"></i>' : '';
            var menuName = data[i].pid === "0" ? '<span>' + data[i].value + '</span>' : data[i].value;
            if (data[i].children && data[i].children.length > 0) {
                menu_body += '<li class="aa nav-item nav-item-has-subnav "><a href="javascript:void(0)" path="' + data[i].path + '">' + icon_div + menuName + '</a>';
                if (depth === 0) {
                    menu_body += createMenu(data[i].children, false, 1);
                } else {
                    menu_body += createMenuChild(data[i].children, false, 2);
                }
            } else {
                menu_body += '<li class="nav-item cc"><a class="multitabs" href="' + data[i].url + '" path="' + data[i].path + '">' + icon_div + menuName + '</a>';
            }
            menu_body += '</li>';
        }

        menu_body += '</ul>';
        return menu_body;
    };
    //创建子菜单
    var createMenuChild = function (data, is_frist, depth) {
        var menu_body = is_frist ? '<ul class="nav nav-drawer">' : '<ul class="nav nav-subnav bb">';
        for (var i = 0; i < data.length; i++) {
            var icon_div = data[i].pid === "0" ? '<i class="mdi ' + data[i].icon + '"></i>' : '';
            var menuName = data[i].pid === "0" ? '<span>' + data[i].value + '</span>' : data[i].value;
            menu_body += '<li class="nav-item cc"><a class="multitabs" href="' + data[i].url + '" path="' + data[i].path + '">' + icon_div + menuName + '</a>';
            menu_body += '</li>';
        }

        menu_body += '</ul>';
        return menu_body;
    };

    //点击菜单
    $(".sidebar-main").on("click", ".multitabs", function () {
        var menu = {
            show: true,
            title: $(this).text(),
            url: $(this).attr('href')
        };
        LogMenu.addMenu(menu);
    });


    /**
     * 树状的算法
     * @params list     代转化数组
     * @params parentId 起始节点
     * @params idName 主键ID名
     * @params parentIdName 父级ID名称
     * @params childrenName 子级名称
     */
    var getTrees = function (list, parentId, idName, parentIdName, childrenName) {
        let items = {};
        // 获取每个节点的直属子节点，*记住是直属，不是所有子节点
        for (let i = 0; i < list.length; i++) {
            let key = list[i][parentIdName];
            if (items[key]) {
                items[key].push(list[i]);
            } else {
                items[key] = [];
                items[key].push(list[i]);
            }
        }
        return formatTree(items, parentId, idName, childrenName);
    }

    /**
     * 利用递归格式化每个节点
     */
    var formatTree = function (items, parentId, idName, childrenName) {
        let result = [];
        if (!items[parentId]) {
            return result;
        }
        for (let t in items[parentId]) {
            items[parentId][t][childrenName] = formatTree(items, items[parentId][t][idName], 'id', 'children')
            result.push(items[parentId][t]);
        }
        return result;
    }

    $(function () {
        //初始化日志菜单
        LogMenu.init();
        var data = Menu.get();
        setSidebar(data)
    });


</script>
